<!--需要复杂的请参考:https://preview.pro.loacg.com/dashboard/analysis-->
<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="项目汇总" :total="entity?entity[0].Count:0">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="VIP用户汇总" :total="entity?entity[1].Count:0">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="订单汇总" :total="entity?entity[2].Count:0">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="小程序浏览次数" :total="entity?entity[3].Count:0">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard/ChartCard'
import Trend from '@/components/ChartCard/Trend'

export default {
  components: {
    ChartCard,
    Trend
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      loading: false,
      entity: [{ Count: 0 }, { Count: 0 }, { Count: 0 }, { Count: 0 }]
    }
  },
  methods: {
    init () {
      this.entity = [{ Count: 0 }, { Count: 0 }, { Count: 0 }, { Count: 0 }]
      this.$http.post('/Base_Manage/Home/GetStatisData', {}).then(resJson => {
        if (resJson.Success) {
          this.entity = resJson.Data
        } else {
          this.entity = [{ Count: 0 }, { Count: 0 }, { Count: 0 }, { Count: 0 }]
        }
      })
    }
  }
}
</script>
